<div id="module_artist_top_chart">
	<div class="moduleArtistTopChartHeader"></div>
	<ul>
		<li class="first"><a href="javascript:void(0);" onclick="javascript:chartSwitch(this,'chartThai');" class="active">ศิลปินไทย</a></li>
		<li><a href="javascript:void(0);" onclick="javascript:chartSwitch(this,'chartInter');">ศิลปินต่างประเทศ</a></li>
	</ul>
	<div class="frameBg">
		<!--Chart Thai-->
		<?php foreach($dataArtistChartThai as $key => $value):?>
		<div class="listRow chartThai <?php echo ($key > 4 ? 'secondChart':'');?>" <?php echo ($key > 4 ? 'style="display:none"':'');?>>
			<div class="rank"><?php echo ($key+1);?></div>
			<a href="<?php echo $artist_url.'summary/'.$value->artist_id.'-'.seo_url($value->artist_name);?>" class="image" target="_blank">
				<?php echo exec_image(array(
							'folder' => 'artist',
							'dimension' => '35x35',
							'file_name' => @$value->artist_file_name.'.'.@$value->artist_file_ext,
							'alt' => ''.@$value->artist_name.'',	
							'title' => ''.@$value->artist_name.''	
						)
				);?>
			</a>
			<div class="info oneRow">
				<a href="<?php echo $artist_url.'summary/'.$value->artist_id.'-'.seo_url($value->artist_name);?>" target="_blank"><?php echo $value->artist_name;?></a>
			</div>
		</div>
		<?php endforeach;?>
		<!--Chart Inter-->
		<?php foreach($dataArtistChartInter as $key => $value):?>
		<div class="listRow chartInter <?php echo ($key > 4 ? 'secondChart':'');?>" style="display:none;">
			<div class="rank"><?php echo ($key+1);?></div>
			<a href="<?php echo $artist_url.'summary/'.$value->artist_id.'-'.seo_url($value->artist_name);?>" class="image" target="_blank">
				<?php echo exec_image(array(
							'folder' => 'artist',
							'dimension' => '35x35',
							'file_name' => @$value->artist_file_name.'.'.@$value->artist_file_ext,
							'alt' => ''.@$value->artist_name.'',	
							'title' => ''.@$value->artist_name.''	
						)
				);?>
			</a>
			<div class="info oneRow">
				<a href="<?php echo $artist_url.'summary/'.$value->artist_id.'-'.seo_url($value->artist_name);?>" target="_blank"><?php echo $value->artist_name;?></a>
			</div>
		</div>
		<?php endforeach;?>
		<a href="javascript:void(0);" class="btnChartSwap arrow down" onclick="javascript:chartSwap(this);">6 - 10</a>
	</div>	
</div>
<script type="text/javascript">
/*Top Chart*/
function chartSwitch(e,eleClass)
{
	var module = $(e).closest('ul').next();
	$(e).closest('ul').find('li a').removeClass('active');
	$(e).addClass('active');
	$(module).find('.listRow').hide();
	$('.'+eleClass+'.secondChart',$(module)).hide();
	$('.'+eleClass+':not(.secondChart)',$(module)).show();
}

function chartSwap(e)
{
	var module = $(e).parent();
	var eleClass = $(module).find('.listRow:visible').attr('class').split(' ');
	if(eleClass[2] == ''){ //Case 6-10
		$('.'+eleClass[1]+':not(.secondChart)',$(module)).hide();
		$('.'+eleClass[1]+'.secondChart',$(module)).show();
		$('a.btnChartSwap',$(module)).removeClass('down').addClass('up').html('1 - 5');	
	} else { //Case 1-5
		$('.'+eleClass[1]+'.secondChart',$(module)).hide();
		$('.'+eleClass[1]+':not(.secondChart)',$(module)).show();	
		$('a.btnChartSwap',$(module)).removeClass('up').addClass('down').html('6 - 10');	
	}
}
</script>